<template>
  <div class="detail-enterprise">
    <header class="add-header">
      <el-page-header content="告警详情" @back="$router.back()" />
    </header>
    <main class="add-main">
      <div class="form-container">
        <div class="title">告警详情</div>
        <el-form v-model="DWList">
          <el-row :gutter="20">
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple" />
              <el-form-item label="告警时间：">
                <span>{{ DWList.warningTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple-light" />
              <el-form-item label="一体杆名称：">
                <span>{{ DWList.poleName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple" />
              <el-form-item label="告警区域：">
                <span>{{ DWList.areaName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple-light" />
              <el-form-item label="一体杆编号：">
                <span>{{ DWList.poleNumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple" />
              <el-form-item label="故障类型：">
                <span>{{ DWList.errorType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple-light" />
              <el-form-item label="处置状态：">
                <span>{{ statusList[DWList.handleStatus]
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </main>
    <main class="add-main">
      <div class="form-container">
        <div class="title">告警处理</div>
        <el-form v-model="DWList">
          <el-row :gutter="20">
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple" />
              <el-form-item label="处理人：">
                <span>{{ DWList.handleUser }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple-light" />
              <el-form-item label="联系方式：">
                <span>{{ DWList.phonenumber }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple" />
              <el-form-item label="处理结果：">
                <span>{{ DWList.handleResult }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="3"><div class="grid-content bg-purple-light" />
              <el-form-item label="完成时间：">
                <span>{{ DWList.handleTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </main>

  </div>
</template>

<script>
import { getDetialWarningAPI } from '@/apis/rod'
export default {
  data() {
    return {
      // cardStartDate: '',
      //   cardEndDate: '',
      //   createTime: '',
      //   paymentAmount: '',
      //   paymentMethod: '',
      //   createUser: ''
      DWList: [],
      MonthCardForm: [],
      // 支付方式列表
      statusList: {
        '0': '未派单',
        '1': '已派单',
        '2': '已接单',
        '3': '已完成'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getDetialWarningAPI(this.$route.query.id)
      console.log(res)
      this.DWList = res.data
    }
  }
}
</script>

<style scoped lang="scss">
.detail-enterprise {
  background-color: #f4f6f8;
  height: 100vh;

  .add-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 64px;
    background-color: #fff;

    .left {
      span {
        margin-right: 4px;
      }
      .arrow{
        cursor: pointer;
      }
    }

    .right {
      text-align: right;
    }
  }

  .add-main {
    background: #f4f6f8;
    padding: 20px 130px;

    .form-container {
      background-color: #fff;
      margin-bottom: 20px;
      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
      }
    }
    .table-container{
      padding:20px;
    }
    .preview{
      img{
        width: 100px;
      }
    }
  }
}
</style>
